<template>
  <view class="content">
    <div class="page">

      <div class="page-content">

        <div class="section-title">所有分类</div>
        <div class="grid grid-cols-2 grid-gap">
          <a href="/post-list/" class="category-item link">
            <img src="/static/img/categories/9.jpg" alt="">
            <div class="category-name">Travel</div>
          </a>
          <a href="/post-list/" class="category-item link">
            <img src="/static/img/categories/10.jpg" alt="">
            <div class="category-name">Health</div>
          </a>
          <a href="/post-list/" class="category-item link">
            <img src="/static/img/categories/11.jpg" alt="">
            <div class="category-name">Food</div>
          </a>
          <a href="/post-list/" class="category-item link">
            <img src="/static/img/categories/12.jpg" alt="">
            <div class="category-name">Environment</div>
          </a>
          <a href="/post-list/" class="category-item link">
            <img src="/static/img/categories/7.jpg" alt="">
            <div class="category-name">Art</div>
          </a>
          <a href="/post-list/" class="category-item link">
            <img src="/static/img/categories/5.jpg" alt="">
            <div class="category-name">Science</div>
          </a>
          <a href="/post-list/" class="category-item link">
            <img src="/static/img/categories/2.jpg" alt="">
            <div class="category-name">Sports</div>
          </a>
          <a href="/post-list/" class="category-item link">
            <img src="/static/img/categories/1.jpg" alt="">
            <div class="category-name">Technology</div>
          </a>
          <a href="/post-list/" class="category-item link">
            <img src="/static/img/categories/3.jpg" alt="">
            <div class="category-name">Politics</div>
          </a>
          <a href="/post-list/" class="category-item link">
            <img src="/static/img/categories/4.jpg" alt="">
            <div class="category-name">Economics</div>
          </a>
          <a href="/post-list/" class="category-item link">
            <img src="/static/img/categories/8.jpg" alt="">
            <div class="category-name">Music</div>
          </a>
          <a href="/post-list/" class="category-item link">
            <img src="/static/img/categories/6.jpg" alt="">
            <div class="category-name">Fashion</div>
          </a>
        </div>
      </div>
    </div>

    <animationTabbar :active-index="2"></animationTabbar>
  </view>

</template>

<script setup lang="ts">
import animationTabbar from "@/uni_modules/animation-tabbar/components/animation-tabbar/animation-tabbar.vue";
</script>


<style scoped >
.content {
  height: 100vh;
}
</style>
